<template xmlns="http://www.w3.org/1999/html">
	<a-row :gutter="10">
		<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="5">
			<a-card :bordered="false" style="margin-bottom: 10px">
				<a-row>
					<a-col :span="24" class="rect-printElement-types hiprintEpContainer">
						<a-tabs v-model:activeKey="activeTabsKey">
							<a-tab-pane key="1" tab="组件列表" force-render>
								<a-row>
									<a-col :span="8" style="padding-top: 40px" class="drag_item_box"
										   v-for="item in baseTools">
										<div>
											<a class="ep-draggable-item" :tid="item.tid" style>
												<component :is="item.icon" class="xn-icons"/>
												<p class="glyphicon-class">{{ item.name }}</p>
											</a>
										</div>
									</a-col>
								</a-row>
							</a-tab-pane>
							<a-tab-pane key="2" tab="系统字段" force-render>
								<a-row>
									<a-col :span="8" style="padding-top: 40px" class="drag_item_box"
										   v-for="item in systemTools">
										<div>
											<a class="ep-draggable-item" :tid="item.tid" style>
												<component :is="item.icon" class="xn-icons"/>
												<p class="glyphicon-class">{{ item.name }}</p>
											</a>
										</div>
									</a-col>
								</a-row>
							</a-tab-pane>
							<a-tab-pane key="3" tab="数据字段" force-render>
								<a-row v-if="reFresh">
									<a-col :span="8" style="padding-top: 40px" class="drag_item_box"
										   v-for="item in dataTools">
										<div>
											<a class="ep-draggable-item" :tid="item.tid" style>
												<component :is="item.icon" class="xn-icons"/>
												<p class="glyphicon-class">{{ item.name }}</p>
											</a>
										</div>
									</a-col>
								</a-row>
							</a-tab-pane>

						</a-tabs>
					</a-col>
				</a-row>
			</a-card>
			<a-card :bordered="false">
				<a-row>
					<a-col :span="24">
						<a-col :span="24">
							<a-form-item label="报表类型" name="reportType">
								{{formData.typeName}}
							</a-form-item>
						</a-col>
						<a-col :span="24">
							<a-form-item label="报表名称" name="reportName">
								<a-input v-model:value="formData.reportName" style="width:100%"
										 placeholder="请输入自定义报表名称"/>
							</a-form-item>
						</a-col>
						<a-col :span="24">
							<a-form-item label="默认格式" name="reportDefault">
								<a-checkbox :checked="reportDefault" @Change="reportDefautlCharge">
									设置为该类报表默认格式
								</a-checkbox>
							</a-form-item>
						</a-col>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
		<a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="14">
			<a-card :bordered="false" style="margin-bottom: 10px">
				<a-row :gutter="24">
					<a-col :span="7">
						<a-form-item label="页面设置">
							<a-select
								v-model:value="pageName"
								:options="pageSizeOptions"
								style="width:80%"
								placeholder="请选择纸张大小"
								:field-names="{
                    label:'name',
                    value:'name'
                  }"
								@change="pageSizeSetting"
							>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="5">
						<a-input :disabled="pageName!='自定义尺寸'" v-model:value="w" style="width:  40%"
								 placeholder="宽"/>
						<a-input :disabled="pageName!='自定义尺寸'" v-model:value="h"
								 style="width: 40%;margin-left: 20px"
								 placeholder="高"/>
					</a-col>
					<a-col :span="12">
						<a-button type="primary" style="margin: 0 8px" @click="rotate">方向</a-button>
						<a-button type="primary" style="margin: 0 8px" @click="setting">设置</a-button>
						<a-button type="primary" style="margin: 0 8px" @click="save">保存</a-button>
						<a-button type="primary" style="margin: 0 8px" @click="print">打印</a-button>
						<a-button type="primary" style="margin: 0 8px" @click="emit('closed')">退出</a-button>
					</a-col>
				</a-row>

				<div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
			</a-card>
		</a-col>
		<a-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
			<a-card :bordered="false">
				<div id="PrintElementOptionSetting" class="PrintElementOptionSetting"></div>
			</a-card>
		</a-col>
	</a-row>
</template>

<script setup name="design">
import {hiprint, defaultElementTypeProvider} from "vue-plugin-hiprint";
import publicReportsApi from "@/api/supplier/setting/publicReportsApi";
import reportOptions from "./reportOptions.json"
import {cloneDeep} from "lodash-es";
import tool from "@/utils/tool";
import nzh from "nzh"

const nzhcn = nzh.cn

// 表单数据，也就是默认给一些数据
const formData = ref({})
const submitLoading = ref(false)
const emit = defineEmits({closed: null})
const activeTabsKey = ref('1')
const reFresh = ref(true)
const w = ref()//报表宽度单位mm
const h = ref()//报表高度单位mm
const pageName = ref() //纸张名称
const pageSizeOptions = ref(reportOptions.pageSizeOptions)//纸张名称下拉选项
const baseTools = ref(reportOptions.baseTools) //基础组件列表
const systemTools = ref(reportOptions.systemTools)  //系统字段组件列表
const dataTools = ref(reportOptions.dataTools)  //数据字段组件列表
//以上三个组件为系统支持的全部组件，待初始化完成后，根据后端传过来的dataTools再进行过滤，去掉不需要显示的
const testData = ref({})  //测试数据
const hiprintTemplate = ref();
const template = ref(reportOptions.blankTemplate)//空白模板
const reportDefault = ref(false)

//选择纸张后，更新尺寸
const pageSizeSetting = (value) => {
	let pageSize = pageSizeOptions.value.find(page => page.name == value);
	w.value = pageSize.pageWidth
	h.value = pageSize.pageHeight
	setting()
}
//旋转方向
const rotate = () => {
	let sizeW = w.value
	let sizeH = h.value
	w.value = sizeH
	h.value = sizeW
	setting()
}
//打印
const print = () => {
	hiprintTemplate.value.print(testData.value)
}
//自定义纸张尺寸设置
const setting = () => {
	hiprintTemplate.value.setPaper(w.value, h.value);
}
//保存
const save = () => {
	submitLoading.value = true
	let json = hiprintTemplate.value.getJson();
	json.panels[0].paperType = pageName.value
	formData.value.reportContent = JSON.stringify(json)
	publicReportsApi
		.publicReportsSubmitForm(formData.value, formData.value.id)
		.then(() => {
			// emit('closed')
		})
		.finally(() => {
			submitLoading.value = false
		})
}
const onOpen = (record) => {
	if (record) {
		const param = {
			id: record.id
		}
		//根据传入的记录信息查询查询模板
		publicReportsApi.publicReportsDetail(param).then((data) => {
			formData.value = Object.assign({}, data)
			dataTools.value = JSON.parse(formData.value.reportDataTools).dataTools//数据字段组件
			testData.value = JSON.parse(formData.value.reportDataTools).testData //测试数据
            reportDefault.value = formData.value.reportDefault==0 ? false: true;
			// console.log(testData.value)
			//构建自定义组件，内容根据从后端返回的字段数据
			const myProvider = function (option) {
				var addElementTypes = function (context) {
					context.removePrintElementTypes("customModule"); // 这里不可用defaultModule，以为已经被插件占用了，如果用了，会导致与默认的provider冲突
					// 添加 customModule "元素"类型
					context.addPrintElementTypes("customModule", [
						// 如果使用 hiprint.PrintElementTypeManager.build('.hiprintEpContainer2', "customModule") 这里会渲染这个 "常规" 分组名称
						// new hiprint.PrintElementTypeGroup("常规", [{tid: "customModule.companyName",type: "text",title: "公司名称",options: {title: "公司名称",field: "companyName",}},{tid: "customModule.companyTel",type: "text",title: "公司电话",options: {title: "公司电话",field: "companyTel",}},{tid: "customModule.companyAddress",type: "text",title: "公司地址",options: {title: "公司地址",field: "companyAddress"}},{tid: "customModule.operator",type: "text",title: "经手人",options: {title: "经手人",field: "operator"}},{tid: "customModule.printDate",type: "text",title: "打印时间",options: {title: "打印时间",field: "printDate"}}])
						new hiprint.PrintElementTypeGroup("常规", reportOptions.component)
					]);
				};
				return {
					addElementTypes: addElementTypes,
				}
			}
			//初始化hiprint加入自定义组件
			hiprint.init({
				providers: [defaultElementTypeProvider(), myProvider()]
			});


			//初始化模板内容，如果后端有模板内容，则作后端的，如果为空，则建一个空白模板
			if (formData.value.reportContent != null) {
				template.value = JSON.parse(formData.value.reportContent)
			}
			//初始化纸张名称和纸张尺寸
			pageName.value = template.value.panels[0].paperType
			w.value = template.value.panels[0].width
			h.value = template.value.panels[0].height

			//在指定区域构建组件
			hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
			//定义模板设置区域名称，模板内容
			hiprintTemplate.value = new hiprint.PrintTemplate({
				settingContainer: "#PrintElementOptionSetting",
				template: template.value
			});
			// 构建一个设计模板，指定容器，是否开启网格展示
			hiprintTemplate.value.design("#hiprint-printTemplate", {grid: true});
		})

	}
}
const reportDefautlCharge = (e)=>{
	reportDefault.value = e.target.checked;
    formData.value.reportDefault = reportDefault.value ? 1:0;
}
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
	onOpen
})
</script>
<style lang="less" scoped>

// 拖拽
.drag_item_box {
	height: 100%;
	padding: 6px;
}

.drag_item_box > div {
	height: 100%;
	width: 100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.drag_item_box > div > a {
	text-align: center;
	text-decoration-line: none;
}

.drag_item_box > div > a > span {
	font-size: 28px;
}

.drag_item_box > div > a > p {
	margin: 0;
}

.drag_item_title {
	font-size: 16px;
	padding: 12px 6px 0 6px;
	font-weight: bold;
}

// 默认图片
:deep(.hiprint-printElement-image-content) {
	img {
		content: url("~@/assets/logo.png");
	}
}

// 辅助线样式
:deep(.toplineOfPosition) {
	border: 0;
	border-top: 1px dashed purple;
}

:deep(.bottomlineOfPosition) {
	border: 0;
	border-top: 1px dashed purple;
}

:deep(.leftlineOfPosition) {
	border: 0;
	border-left: 1px dashed purple;
}

:deep(.rightlineOfPosition) {
	border: 0;
	border-left: 1px dashed purple;
}

// 设计容器
.card-design {
	overflow: hidden;
	overflow-x: auto;
	overflow-y: auto;
}

</style>



